<template>
    <a-modal v-model="visible" :title="modalTitle" @ok="handleOk" width="1200px">
        <template slot="footer">
            <a-button key="back" @click="handleCancel">
                关闭
            </a-button>
            <a-button v-if="modalType === 'out'" key="submit" type="primary" @click="handleOk">
                保存
            </a-button>
            <a-button v-if="modalType === 'inbound'" key="submit" type="primary" @click="handleInbound">
                保存
            </a-button>
        </template>
        <a-table ref="table" size="middle" :scroll="{ x: '130%', y: 500 }" bordered rowKey="id" :columns="columns"
            :dataSource="dataSource" :pagination="false" :loading="loading" class="j-table-force-nowrap">
            <div slot="actualAmountTitle">
                <span style="color: red;">*</span>
                <span>实际出库数量</span>
            </div>
            <div slot="storehouseId_dictTextTitle">
                <span style="color: red;">*</span>
                <span>领用仓库</span>
            </div>

            <template slot="actualNum" slot-scope="text, record">
                <a-input-number v-model="record.actualNum" :step="1" :precision="0" :disabled="modalType === 'detail'" />
            </template>
            <template slot="actualAmount" slot-scope="text, record">
                <a-input-number v-model="record.actualAmount" :step="1" :precision="0"
                    :disabled="modalType === 'detail' || modalType === 'inbound'" />
            </template>
            <template slot="store" slot-scope="text, record">
                <a-input v-if="modalType === 'detail'" disabled v-model="record.storehouseId_dictText"></a-input>
                <a-select v-else v-model="record.storehouseId" @change="(arg) => { changeStore(arg, record) }"
                    style="width: 120px">
                    <a-select-option v-for="item in storeList" :key="item.id" :value="item.id">

                        <a-tooltip>
                            <template slot="title">
                                {{ item.storehouseName }}
                            </template>
                                {{ item.storehouseName }}
                        </a-tooltip>

                    </a-select-option>
                </a-select>

            </template>
        </a-table>
    </a-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
export default {
    name: 'MngVueErpPurchaseOutStore',

    data() {
        return {
            visible: false,
            modalTitle: "",
            dataSource: [{
                purchaseBill: "123123"
            }],
            receiveColumns: [
                {
                    title: '物料大类',
                    align: 'center',
                    dataIndex: 'provisionBroad_dictText',
                    ellipsis: true
                },
                {
                    title: '物料小类',
                    align: 'center',
                    dataIndex: 'provisionSmall_dictText',
                    ellipsis: true
                },
                {
                    title: '物料编号',
                    align: 'center',
                    dataIndex: 'materialBillId',
                    ellipsis: true
                },
                {
                    title: '物料名称',
                    align: 'center',
                    dataIndex: 'materialName_dictText',
                    ellipsis: true
                },
                {
                    title: '规格型号',
                    align: 'center',
                    dataIndex: 'specification',
                    ellipsis: true
                },
                {
                    title: '单位',
                    align: 'center',
                    dataIndex: 'unit_dictText',
                    ellipsis: true
                },
                {
                    title: '品牌',
                    align: 'center',
                    dataIndex: 'brand',
                    ellipsis: true
                },
                {
                    title: '供应商',
                    align: 'center',
                    dataIndex: 'companName_dictText',
                    ellipsis: true
                },
                {
                    title: '领用数量',
                    align: 'center',
                    dataIndex: 'recipientsNum',
                    ellipsis: true
                },
                {
                    title: '物料用途',
                    align: 'center',
                    dataIndex: 'remark',
                    ellipsis: true
                },
                {
                    // title: '实际出库数量',
                    // slot: { title: 'actualAmountTitle' },
                    align: 'center',
                    dataIndex: 'actualNum',
                    scopedSlots: { customRender: 'actualNum', title: 'actualAmountTitle' },
                    // fixed: 'right',
                    width: 140
                },
                {
                    // title: '领用仓库',
                    align: 'center',
                    dataIndex: 'storehouseId_dictText',
                    scopedSlots: { customRender: 'store', title: "storehouseId_dictTextTitle" },
                    fixed: 'right',
                    width: 140
                },
            ],
            cannibalizeColumns: [
                {
                    title: '物料大类',
                    align: 'center',
                    dataIndex: 'provisionBroad_dictText',
                    ellipsis: true
                },
                {
                    title: '物料小类',
                    align: 'center',
                    dataIndex: 'provisionSmall_dictText',
                    ellipsis: true
                },
                {
                    title: '物料编号',
                    align: 'center',
                    dataIndex: 'materialBillId',
                    ellipsis: true
                },
                {
                    title: '物料名称',
                    align: 'center',
                    dataIndex: 'materialName_dictText',
                    ellipsis: true
                },
                {
                    title: '物品规格',
                    align: 'center',
                    dataIndex: 'specification',
                    ellipsis: true
                },
                {
                    title: '品牌',
                    align: 'center',
                    dataIndex: 'brand',
                    ellipsis: true
                },
                {
                    title: '单位',
                    align: 'center',
                    dataIndex: 'unit_dictText',
                    ellipsis: true
                },
                {
                    title: '备注',
                    align: 'center',
                    dataIndex: 'remark',
                    ellipsis: true
                },
                {
                    title: '数量',
                    align: 'center',
                    dataIndex: 'amount',
                    ellipsis: true
                },
                {
                    // title: '实际出库数量',
                    align: 'center',
                    dataIndex: 'actualAmount',
                    scopedSlots: { customRender: 'actualAmount', title: 'actualAmountTitle' },
                    fixed: 'right',
                    width: 140
                },
            ],
            loading: false,
            modalType: '',
            storeList: [],
        };
    },
    props: {
        // 物品领用 receive  物资调用cannibalize
        page: {
            default: '',
            type: String
        },
    },
    computed: {
        initUrl() {
            let obj = {
                receive: '/api/erp/purchase/recipients/erpPurchaseRecipientsDetail/allList',
                cannibalize: "/api/erp/purchase/recipients/erpPurchaseCannibalizeDetail/allList",
            }
            return obj[this.page]
        },
        outboundUrl() {
            let obj = {
                receive: '/api/erp/purchase/recipients/erpPurchaseRecipientsDetail/outbound',
                cannibalize: "/api/erp/purchase/recipients/erpPurchaseCannibalize/outbound",
            }
            return obj[this.page]
        },
        columns() {
            let obj = {
                receive: this.receiveColumns,
                cannibalize: this.cannibalizeColumns
            }
            return obj[this.page]
        },
    },

    mounted() {

    },

    methods: {
        showModal(record, type) {
            this.visible = true
            this.modalType = type
            this.initData(record.id)
            if (this.page === 'receive') {
                this.initStore(record.teamId)
                this.modalTitle = '物品领用明细'
            } else {
                this.modalTitle = '物资调拨明细'
            }

        },
        handleCancel() {
            this.visible = false
            this.dataSource = []

        },
        handleOk() {
            // 验证必填项
            let status
            if (this.page === 'receive') {
                status = this.dataSource.every(it => {
                    return it.actualNum !== '' && it.actualNum !== null && it.storehouseId !== ''
                })
            } else {
                status = this.dataSource.every(it => {
                    return it.actualAmount !== '' && it.actualAmount !== null
                })
            }

            if (!status) {
                return this.$message.warning('请完善子表信息');
            }
            let detailList = []
            // 物品领用
            if (this.page === 'receive') {
                detailList = this.dataSource.map(it => {
                    return {
                        id: it.id,
                        billId: it.billId,
                        storehouseId: it.storehouseId,
                        materialName: it.materialName,
                        actualNum: it.actualNum,
                        recipientsNum: it.recipientsNum,
                        provisionBroad: it.provisionBroad,
                        provisionSmall: it.provisionSmall,
                        materialBillId: it.materialBillId,
                        specification: it.specification,
                        unit: it.unit,
                        brand: it.brand,
                    }
                })
                // 物资调拨
            } else {
                detailList = this.dataSource.map(it => {
                    return {
                        id: it.id,
                        billId: it.billId,
                        amount: it.amount,
                        actualAmount: it.actualAmount
                    }
                })
            }

            postAction(this.outboundUrl, detailList).then(res => {
                if (res.success) {
                    this.$message.success('操作成功')
                    this.handleCancel()
                    this.$emit('refresh');
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        // 入库
        handleInbound() {
            let arr = this.dataSource.map(it => {
                return {
                    billId: it.billId,
                    provisionBroad: it.provisionBroad,
                    provisionSmall: it.provisionSmall,
                    materialName: it.materialName,
                    materialBillId: it.materialBillId,
                    specification: it.specification,
                    unit: it.unit,
                    brand: it.brand,
                    actualAmount: it.actualAmount,
                }
            })
            postAction('/api/erp/purchase/recipients/erpPurchaseCannibalize/inbound', arr).then(res => {
                if (res.success) {
                    this.$message.success('操作成功')
                    this.handleCancel()
                    this.$emit('refresh');
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        // 验证某仓库是否存在该物资
        changeStore(id, record) {
            let materialName = record.materialName
            let storehouseId = id
            getAction('/api/erp/purchase/storehouse/erpPurchaseWarehouse/queryWarehouseExist', { materialName, storehouseId }).then(res => {
                if (!res.success) {
                    this.$message.error(res.message)
                    this.$set(record, 'storehouseId', '')
                }
            })
        },


        initData(billId) {
            this.loading = true
            getAction(this.initUrl, { billId }).then((res) => {
                this.loading = false
                if (res.success) {
                    this.dataSource = res.result
                }
            }).catch(err => {
                this.loading = false
            })
        },
        initStore(department) {
          //   /api/erp/purchase/storehouse/erpStorehouseBase/queryByTeam 旧
            getAction('/api/erp/purchase/storehouse/erpStorehouseBase/queryByEmpId', { department }).then(res => {
                if (res.success) {
                    this.storeList = res.result
                }
            })
        },
    },
};
</script>

<style lang="less" scoped></style>